<template>
  <Suspense>
    <component :is="component" />
  </Suspense>
  <Tabbar v-model="currentComponent">
    <TabbarItem name="charts" icon="chart-trending-o">走势图</TabbarItem>
    <TabbarItem name="bonus" icon="gold-coin-o">分红</TabbarItem>
    <TabbarItem name="company" icon="info-o">详情</TabbarItem>
    <TabbarItem name="stocks" icon="cluster-o">关联</TabbarItem>
    <TabbarItem name="manager" icon="manager-o">高管</TabbarItem>
    <TabbarItem name="topholders" icon="friends-o">股东</TabbarItem>
  </Tabbar>
</template>
<script setup>
  import { useStore } from 'vuex';
  import { useRoute } from 'vue-router';
  import { ref, computed, onMounted, watch, defineAsyncComponent } from 'vue';

  import { Tabbar, TabbarItem } from 'vant';

  const $store = useStore();
  const $route = useRoute();
  const currentComponent = ref('charts');

  const components = {
    charts: defineAsyncComponent(() => import('./components/Chart.vue')),
    bonus: defineAsyncComponent(() => import('./components/Bonus.vue')),
    company: defineAsyncComponent(() => import('./components/Company.vue')),
    stocks: defineAsyncComponent(() => import('./components/Stocks.vue')),
    manager: defineAsyncComponent(() => import('./components/Manager.vue')),
    topholders: defineAsyncComponent(() => import('./components/TopHolders.vue'))
  };

  const component = computed(() => components[currentComponent.value]);

  watch($route, () => {
    $store.commit('navigateTitle', `股票详情 - ${$route.query.title}`);
  });

  onMounted(() => {
    $store.commit('navigateBack', { path: '/shares/list' });
    $store.commit('navigateTitle', `股票详情 - ${$route.query.title}`);
  });
</script>

<style lang="less" scoped></style>
